<template>
     <el-row style="margin:20px">
          <el-col :span="24">

               <table class="view-table-primary">
                    <template>
                         <tr v-for="(item, prop) in columns" :key="prop">
                              <th :span="4" v-html="item.label"></th>
                              <td :span="18">
                                   <template>
                                        <general v-if="item.hasOwnProperty('componentName')"  disabled v-bind="inheritProps(item)"  :component-name="item.componentName"></general>
                                        <!-- <el-tag v-if="item.component=='tag'" :type="success" v-html="data[prop]">
                                        </el-tag>
                                        <el-switch v-else-if="item.component=='switch'" :value="data[prop]" disabled>
                                        </el-switch> -->
                                        <span v-else v-html="data[prop]"></span>
                                   </template>

                              </td>

                         </tr>
                    </template>
               </table>

          </el-col>
     </el-row>
</template>

<script>
export default {
  components: {
    general: () =>
                import('@/components/general/index')
  },
  data () {
    return {}
  },
  props: {
    columns: {
      type: Object,
      required: true
    },
    data: Object
  },
  created () {
    console.log(this.columns, this.data, 1)
  },
  methods: {
    // 继承转换属性
    inheritProps (template) {
      let cloneTemplate = {}
      Object.assign(cloneTemplate, template)

      let componentName = cloneTemplate.componentName

      switch (componentName.toKebabCase()) {
        case 'button-input':
          cloneTemplate.noText =
                            Object.prototype.toString.call(cloneTemplate.noText) ==
                            '[object Boolean]'
                              ? cloneTemplate.noText
                              : true
          delete cloneTemplate.visible
          break
      }

      delete cloneTemplate.componentName
      delete cloneTemplate.visible

      return cloneTemplate
    }
  }
}
</script>
